<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
      </div>
      <!-- table区域-begin -->
      <div>
        <ul>
          <li v-for="(item,i) in tagUl" :key="i" @click="chooseTag(i)" :class="item.choose?'tag_li_on':'tag_li'">
            <div class="tag_val" >{{item.name}}</div>
          </li>
        </ul>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/blog/blogTag';
import { Slime } from '@/mixins/slime';
export default {
  name: 'meterQueryModal',
  mixins: [Slime],
  data() {
    return {
      title: '详情',
      tagUl:[
        // {name:'qwe', id:1, choose:false}, // false未选中，true选中
        // {name:'qwe1', id:2, choose:false},
        // {name:'qwe2', id:3, choose:false},
      ],
      chooseUl:[

      ],
    };
  },
  watch: {
    tagUl(val) {
    },
  },
  created() {},
  methods: {
    //初始加载
    search() {
      this.visible = true;
      this.loadData();
    },
    //加载的标签
    loadData(arg,tagIds) {
      this.loading = true;
      ApiTree.getList()
        .then((res) => {
          let data = res;
          const tableData = data.map(function (item) {
            item = { ...item , choose:false};
            // if(tagIds.length == 0){
            //   item = { ...item , choose:false};
            // }else{
            //   tagIds.map((obj) => {
            //     if(obj == item.id){
            //       item = { ...item , choose:true};
            //     }else{
            //       item = { ...item , choose:false};
            //     }
            //   })
            // }
            return item;
          });
          this.tagUl = tableData;
          this.chooseUl = []
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // funHaveTagIds(tagIds){
    //   this.tagUl.map((obj2) => {
    //     tagIds.map((obj1) => {
    //       if(obj1 == obj2.id){
            
    //       }else{

    //       }
    //     })
    //     return obj2
    //   })
    // },
    //选中标签
    chooseTag(i){
      let chooseUlNew = this.chooseUl
      if(this.chooseUl.length < 5 && !this.tagUl[i].choose){ //未选中
        chooseUlNew.push(this.tagUl[i])
      }else if(this.chooseUl.length < 5 && this.tagUl[i].choose){ //选中
        for(let j=0;j<chooseUlNew.length;j++){
          if(this.tagUl[i].id == chooseUlNew[j].id){
            chooseUlNew.splice(j,1)
          }
        }
      }else{
      }
      this.chooseUl = chooseUlNew
      this.tagUl[i].choose = !this.tagUl[i].choose
    },
    close() {
      this.visible = false;
    },
    handleOk() {
      this.$emit('choose', this.chooseUl);
      this.close();
    },
    handleCancel() {
      this.close();
    },
  },
};
</script>

<style scoped>
.tag_li{
  padding: 8px;
  border-radius:5px ;  
  border:1px solid #1890ff ;
  display: inline-block;
  text-align: center;
  color: #1890ff;
  margin: 5px;
}
.tag_li_on{
  padding: 8px;
  border-radius:5px ;  
  border:1px solid #1890ff ;
  background-color: #1890ff;
  display: inline-block;
  text-align: center;
  color: #fff;
  margin: 5px;
}
</style>